<template>
  <Drawer
    v-model:visible="visible"
    class="custom-class"
    title="第三方应用集成配置"
    width="100%"
    :destroyOnClose="true"
    placement="right"
  >
    <Button class="float-right md:mx-5 md:my-5" @click="appHandler" type="primary"> 新增第三方应用集成配置</Button>
    <BasicTable @register="registerTable"></BasicTable>
  </Drawer>
  <BasicModal ref="integrateModalRef" @success="successHandler"></BasicModal>
</template>

<script lang="ts" setup>
import { Button, Drawer } from 'ant-design-vue';
import BasicTable from '../../../../components/BasicTable/BasicTable.vue';
import { useBasicTable } from '../../../../components/BasicTable/hooks/useBasicTable';
import { ref } from 'vue';
import BasicModal from '/@/views/system-mgmt/app-mgmt/modal/BasicModal.vue';
import { getCloudLinkList } from '/@/api/system-mgmt/app-mgmt/app';
import { appsColumns } from '/@/views/system-mgmt/app-mgmt/drawer/data';

const integrateModalRef = ref('integrateModalRef');
const visible = ref(false);
const appId = ref();

const appHandler = () => {
  integrateModalRef.value.openModal('integrate', appId.value, undefined);
};
const handlerEdit = (record: Recordable) => {
  integrateModalRef.value.openModal('integrate', appId.value, record);
};

const [registerTable, { setTableData }] = useBasicTable({
  columns: appsColumns,
  actionColumns: [
    {
      name: '编辑',
      // eslint-disable-next-line no-use-before-define
      click: handlerEdit,
      props: {
        style: { color: '#6285a3', fontWeight: 'bolder' },
      },
    },
  ],
});

const openDrawer = async (id: string) => {
  visible.value = true;
  appId.value = id;
  let datasource = await getCloudLinkList({ id: appId.value });
  datasource.forEach((item) => {
    item.app = '云联';
  });
  setTableData(datasource);
};

const successHandler = async () => {
  let datasource = await getCloudLinkList({ id: appId.value });
  datasource.forEach((item) => {
    item.app = '云联';
  });
  setTableData(datasource);
};

defineExpose({ openDrawer });
</script>
